/* 高级现代化样式设计 - Premium Edition */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 50%, #0f1419 100%);
  color: #e8eaed;
  min-height: 100vh;
  font-weight: 400;
  letter-spacing: 0.01em;
}

#app {
  min-height: 100vh;
}

/* 高级输入框设计 */
.el-input__wrapper {
  background: linear-gradient(145deg,
      rgba(30, 41, 59, 0.95) 0%,
      rgba(15, 23, 42, 0.9) 100%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-radius: 12px !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.el-input__wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(59, 130, 246, 0.1),
      transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}

.el-input__wrapper:hover {
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(59, 130, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
  background: linear-gradient(145deg,
      rgba(30, 41, 59, 0.98) 0%,
      rgba(15, 23, 42, 0.95) 100%) !important;
  transform: translateY(-1px) !important;
}

.el-input__wrapper:hover::before {
  left: 100%;
}

.el-input__wrapper.is-focus {
  border-color: rgba(59, 130, 246, 0.8) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  background: linear-gradient(145deg,
      rgba(30, 41, 59, 1) 0%,
      rgba(15, 23, 42, 0.98) 100%) !important;
  transform: translateY(-2px) !important;
}

.el-input__inner {
  background: transparent !important;
  border: none !important;
  color: #f1f5f9 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 14px 16px !important;
  height: auto !important;
  line-height: 1.5 !important;
  position: relative !important;
  z-index: 2 !important;
}

.el-input__inner::placeholder {
  color: rgba(148, 163, 184, 0.7) !important;
  font-weight: 400 !important;
}

/* 高级文本域设计 */
.el-textarea__inner {
  background: linear-gradient(145deg,
      rgba(30, 41, 59, 0.95) 0%,
      rgba(15, 23, 42, 0.9) 100%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-radius: 12px !important;
  color: #f1f5f9 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 14px 16px !important;
  resize: vertical !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.el-textarea__inner:hover {
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(59, 130, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-1px) !important;
}

.el-textarea__inner:focus {
  border-color: rgba(59, 130, 246, 0.8) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  outline: none !important;
  transform: translateY(-2px) !important;
}

.el-textarea__inner::placeholder {
  color: rgba(148, 163, 184, 0.7) !important;
  font-weight: 400 !important;
}

/* 选择框样式已移除，由各页面自定义 */

.el-select .el-input__wrapper:hover {
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(59, 130, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-1px) !important;
}

.el-select .el-input__wrapper.is-focus {
  border-color: rgba(59, 130, 246, 0.8) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) !important;
}

.el-select .el-input__inner {
  background: transparent !important;
  color: #f1f5f9 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 16px !important;
}

.el-select .el-input__inner::placeholder {
  color: rgba(148, 163, 184, 0.7) !important;
  font-weight: 400 !important;
}

/* 高级下拉菜单设计 */
.el-select-dropdown {
  background: linear-gradient(145deg,
      rgba(30, 41, 59, 0.98) 0%,
      rgba(15, 23, 42, 0.95) 100%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  border-radius: 12px !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  z-index: 9999 !important;
  overflow: hidden !important;
}

.el-select-dropdown__item {
  color: #f1f5f9 !important;
  background: transparent !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.1) !important;
  position: relative !important;
}

.el-select-dropdown__item:last-child {
  border-bottom: none !important;
}

.el-select-dropdown__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg,
      rgba(59, 130, 246, 0.3),
      rgba(59, 130, 246, 0.1));
  transition: width 0.3s ease;
}

.el-select-dropdown__item:hover {
  background: rgba(59, 130, 246, 0.08) !important;
  color: #60a5fa !important;
  transform: translateX(4px) !important;
}

.el-select-dropdown__item:hover::before {
  width: 4px;
}

.el-select-dropdown__item.selected {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  font-weight: 600 !important;
}

.el-select-dropdown__item.selected::before {
  width: 4px;
}

/* 表单项样式 */
.el-form-item__label {
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.025em !important;
}

.el-form-item__error {
  color: #f87171 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 6px !important;
}

/* 数字输入框 */
.el-input-number .el-input__wrapper {
  background: linear-gradient(145deg,
      rgba(30, 41, 59, 0.95) 0%,
      rgba(15, 23, 42, 0.9) 100%) !important;
}

.el-input-number__decrease,
.el-input-number__increase {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
  transition: all 0.2s ease !important;
}

.el-input-number__decrease:hover,
.el-input-number__increase:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3) !important;
}

/* 单选按钮 */
.el-radio {
  color: #cbd5e1 !important;
  font-weight: 500 !important;
}

.el-radio__inner {
  background: rgba(30, 41, 59, 0.8) !important;
  border: 2px solid rgba(59, 130, 246, 0.4) !important;
}

.el-radio__input.is-checked .el-radio__inner {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

.el-radio__label {
  color: #cbd5e1 !important;
  font-weight: 500 !important;
}

/* 分割线 */
.el-divider {
  border-color: rgba(59, 130, 246, 0.2) !important;
}

.el-divider__text {
  background: transparent !important;
  color: #60a5fa !important;
  font-weight: 600 !important;
}

/* 高级弹窗设计 */
.host-dialog .el-dialog,
.tech-dialog .el-dialog {
  background: linear-gradient(145deg,
      rgba(15, 23, 42, 0.98) 0%,
      rgba(30, 41, 59, 0.95) 100%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  border-radius: 20px !important;
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.4),
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
}

.host-dialog .el-dialog::before,
.tech-dialog .el-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(59, 130, 246, 0.8) 20%,
      rgba(147, 197, 253, 0.9) 50%,
      rgba(59, 130, 246, 0.8) 80%,
      transparent 100%);
  border-radius: 20px 20px 0 0;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {

  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }
}

.host-dialog .el-dialog__header,
.tech-dialog .el-dialog__header {
  background: rgba(59, 130, 246, 0.08) !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-radius: 20px 20px 0 0 !important;
  backdrop-filter: blur(12px) !important;
  padding: 24px 32px !important;
  margin: 0 !important;
}

.host-dialog .el-dialog__title,
.tech-dialog .el-dialog__title {
  color: #93c5fd !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-shadow: 0 0 20px rgba(59, 130, 246, 0.4) !important;
  letter-spacing: 0.5px !important;
}

.host-dialog .el-dialog__headerbtn,
.tech-dialog .el-dialog__headerbtn {
  color: rgba(59, 130, 246, 0.8) !important;
  font-size: 20px !important;
  transition: all 0.3s ease !important;
}

.host-dialog .el-dialog__headerbtn:hover,
.tech-dialog .el-dialog__headerbtn:hover {
  color: #93c5fd !important;
  transform: scale(1.1) !important;
}

.host-dialog .el-dialog__body,
.tech-dialog .el-dialog__body {
  padding: 32px !important;
  background: transparent !important;
}

/* 弹窗内表单样式继承 */
.host-dialog .el-input__wrapper,
.tech-dialog .el-input__wrapper,
.host-dialog .el-textarea__inner,
.tech-dialog .el-textarea__inner,
.host-dialog .el-select .el-input__wrapper,
.tech-dialog .el-select .el-input__wrapper {
  background: linear-gradient(145deg,
      rgba(30, 41, 59, 0.95) 0%,
      rgba(15, 23, 42, 0.9) 100%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
}

/* 高级按钮设计 */
.tech-button {
  background: linear-gradient(145deg,
      rgba(59, 130, 246, 0.9) 0%,
      rgba(37, 99, 235, 0.8) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.6) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.025em !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow:
    0 4px 16px rgba(59, 130, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  position: relative !important;
  overflow: hidden !important;
}

.tech-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent);
  transition: left 0.5s ease;
}

.tech-button:hover {
  background: linear-gradient(145deg,
      rgba(59, 130, 246, 1) 0%,
      rgba(37, 99, 235, 0.9) 100%) !important;
  box-shadow:
    0 8px 24px rgba(59, 130, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
}

.tech-button:hover::before {
  left: 100%;
}

.tech-button-secondary {
  background: transparent !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  color: #60a5fa !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.tech-button-secondary:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.8) !important;
  color: #93c5fd !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* 卡片样式 */
.el-card {
  background: linear-gradient(145deg,
      rgba(30, 41, 59, 0.9) 0%,
      rgba(15, 23, 42, 0.8) 100%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.el-card__header {
  background: rgba(59, 130, 246, 0.05) !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.2) !important;
  backdrop-filter: blur(8px) !important;
}

.el-card__body {
  background: transparent !important;
}